<%--
  Created by IntelliJ IDEA.
  User: tang
  Date: 2020/4/25
  Time: 12:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>

<!DOCTYPE html>
<html>
<head>
    <title>我的商城 | 用户管理</title>
    <jsp:include page="../includs/header.jsp"></jsp:include>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <jsp:include page="../includs/nav.jsp"></jsp:include>
    <!-- Main Sidebar Container -->
    <jsp:include page="../includs/menu.jsp"></jsp:include>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">用户列表</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/main">主页</a></li>
                            <li class="breadcrumb-item active">用户列表</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <section class="content">
            <div class="card card-info m-2">
                <!-- form start -->
                <div class="card-body">
                    <div class="row">
                        <div class="form-group display-flex col-sx-12">
                            <label for="username" class="col-sm-3 col-form-label">用户名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="username" name="username"
                                       placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group display-flex col-sx-12">
                            <label for="Email" class="col-sm-3 col-form-label">邮箱</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="email" name="email" placeholder="电子邮箱">
                            </div>
                        </div>
                        <div class="form-group display-flex col-sx-12">
                            <label for="phone" class="col-sm-3 col-form-label">电话</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="电话号码">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button class="btn btn-primary float-right" onclick="search()">搜索</button>
                </div>
                <!-- /.card-footer -->
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <c:if test="${baseResult != null}">
                            <div class="alert alert-${baseResult.status == 200 ? "success" : "danger"} alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;
                                </button>
                                    ${baseResult.message}
                            </div>
                        </c:if>
                        <div class="card">
                            <div class="row pl-30 pt-10 card-footer m-0">
                                <a href="/user/form" class="btn btn-default btn-sm mr-10"><i
                                        class="fa fa-plus"></i>新增</a>
                                <a href="#" onclick="App.deleteMulti('/user/delete')"
                                   class="btn btn-default btn-sm mr-10"><i class="fa fa-trash"></i>删除</a>
                                <a href="#" class="btn btn-default btn-sm mr-10"><i class="fa fa-download"></i>导入</a>
                                <a href="#" class="btn btn-default btn-sm mr-10"><i class="fa fa-upload"></i>导出</a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body table-responsive">
                                <table id="dataTable" class="table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th class="w-40 col-sm-2 text-align-center">
                                            <div class="custom-control custom-checkbox pl-20">
                                                <input id="master" class="custom-control-input check_master"
                                                       type="checkbox" value="option1">
                                                <label for="master" class="custom-control-label"></label>
                                            </div>
                                        </th>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>电话号码</th>
                                        <th>邮箱</th>
                                        <th>更新时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${tbUsers}" var="tbUser">
                                        <tr class="table vertical-align-inherit">
                                            <td class="text-align-center "></td>
                                            <td>${tbUser.id}</td>
                                            <td>${tbUser.username}</td>
                                            <td>${tbUser.phone}</td>
                                            <td>${tbUser.email}</td>
                                            <td><fmt:formatDate value="${tbUser.updated}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                            <td></td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>

    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="../includs/copyright.jsp"></jsp:include>
</div>
<jsp:include page="../includs/footer.jsp"></jsp:include>

<sys:modal/>

<script>
    var _dataTable;
    $(function () {
        var _columns = [
            {
                "data": function (row, type, val, meta) {
                    return '<div class="custom-checkbox pl-30">\n' +
                        '      <input id="' + row.id + '" class="custom-control-input" type="checkbox" value="option1">\n' +
                        '      <label for="' + row.id + '" class="custom-control-label"></label>\n' +
                        '   </div>';
                }
            },
            {"data": "id"},
            {"data": "username"},
            {"data": "phone"},
            {"data": "email"},
            {
                "data": function (row, type, val, meta) {
                    return DateTime.format(row.updated, "yyyy-MM-dd HH:mm:ss")
                }
            },
            {// /user/detail?id="'+id+'
                "data": function (row, type, val, meta) {
                    var id = row.id;
                    var detailUrl = "'/user/detail?id=" + id + "'";
                    var deleteUrl = "/user/delete";
                    return '<button class="btn btn-default btn-sm" onclick="App.showDetail(\'' + detailUrl + '\')"><i class="fa fa-search"></i>查看</button>\n' +
                        '   <a href="/user/form?id=' + id + '" class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o"></i>编辑</a>\n' +
                        '   <button type="button" class="btn btn-danger btn-sm" onclick="App.deleteSingle(\'' + deleteUrl + '\', \'' + row.id + '\')"><i class="fa fa-trash"></i>删除</button>';
                }
            }
        ];
        _dataTable = App.initDataTables("/user/page", _columns)
    })

    function search() {
        var username = $("#username").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var param = {
            "username": username,
            "phone": phone,
            "email": email
        }
        _dataTable.settings()[0].ajax.data = param;
        _dataTable.ajax.reload();
    }
</script>
</body>

</html>